<template>
  <div>
    <div class="index_box">
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 公告 -->
    <div class="notice">
      <div class="warp" style="color: #1590ed">
        <span style="color: black"> 紧急通告：</span>
        <marquee loop="-1">{{topmsg}}</marquee>
      </div>
    </div>
    <!-- 公告 end-->
    <!-- 内容 -->
    <div class="content">
      <div class="warp">
        <div class="con-left">
          <!-- 快速录入 -->
          <div class="Input pub-padding ">
            <ul class="Input-list">
              <li class="pub-title">我的微店</li>
              <li class="font-w" @click="rele">发布公告</li>
              <!--<li class="font-w">快速录入</li>-->
              <li @click="Sale">我要录楼盘</li>
              <li @click="Hous">我要录房源</li>
              <li @click="tour">我要录客源</li>
            </ul>
          </div>
          <!-- 快速录入 end -->
          <!--div-->
          <!--快搜 -->
          <div class="fastseek">
            <div class="">
              <!--轮播图-->
              <el-carousel trigger="click" height="230px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3>{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
            <ul class="from">

            </ul>
          </div>
          <!-- 快搜 end -->
          <!-- 排行榜 -->
          <div class="ranking">
            <!-- 本月房源排行榜 -->
            <div class="ranking-left">
              <div class="pub-w pub-padding">
                <span class="">本月房源排行榜</span>
                <div class="fastseek-list float">查看更多</div>
              </div>
              <ul class="ranking-left-list">
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>

              </ul>
            </div>
            <!-- 本月房源排行榜 end-->
            <!-- 本月业绩排行榜 -->
            <div class="ranking-left ranking-right">
              <div class="pub-w pub-padding">
                <span class="pub-title pub-w1">本月业绩排行榜</span>
                <div class="fastseek-list float">查看更多</div>
              </div>
              <ul class="ranking-left-list">
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
                <li>
                  <p class="p-left">第1名</p>
                  <p class="p-middle">1000000元</p>
                  <p class="p-right">王小二</p>
                </li>
              </ul>
            </div>
            <!-- 本月业绩排行榜 end -->
          </div>
          <!-- 排行榜 end-->
        </div>
        <div class="con-right">
          <div class="con-pub">
            <!-- 数据统计 -->
            <div class="pub-c-w">
              <div class="pub-w pub-padding">
                <span class="pub-title pub-w1">数据统计</span>
                <div class="fastseek-list float">公司排名</div>
              </div>
              <ul class="ranking-left-list">
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
                <li>
                  <p class="p-left">今日新增成交</p>
                  <p class="p-middle">[<span class="color">1000000</span>]&nbsp;元</p>
                  <p class="p-right">5</p>
                </li>
              </ul>
            </div>
            <!-- 数据统计 end-->
            <!-- 本周推荐房源 -->
            <div class="pub-c-w pub-c-w1">
              <div class="pub-w pub-padding">
                <span class="pub-title pub-w1">本周推荐房源</span>
                <!--<div class="fastseek-list float">查看更多</div>-->
              </div>
              <ul class="ranking-left-list">
               <li v-for="item in indexData.house_recommend">
                <p class="p-left">{{item.premises_name}}</p>
                <p class="p-middle">{{item.acreage}}</p>
                <p class="p-right">{{item.sell}}</p>
                </li>
              </ul>
            </div>
            <!-- 本周推荐房源 end-->
            <!-- 最新房源 -->
            <div class="pub-c-w">
              <div class="pub-w pub-padding">
                <span class="pub-title pub-w1">最新房源</span>
                <!--<div class="fastseek-list float">查看更多</div>-->
                <!--<div class="fastseek-list float">查看更多</div>-->
              </div>
              <ul class="ranking-left-list">

                <li v-for="item in indexData.house_new">
                  <p class="p-left">{{item.premises_name}}</p>
                  <p class="p-middle">{{item.acreage}}</p>
                  <p class="p-right">{{item.sell}}</p>
                </li>
              </ul>
            </div>
            <!-- 最新房源 end-->
          </div>
          <div class="con-pub con-pub1">
            <!-- 最新采集客源 -->
            <div class="pub-c-w">
              <div class="pub-w pub-padding">
                <span class="pub-title pub-w1">最新采集客源</span>
                <div class="fastseek-list float">查看更多</div>
              </div>
              <ul class="ranking-left-list">
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
              </ul>
            </div>
            <!-- 最新采集客源 end-->
            <!-- 最新采集房源 -->
            <div class="pub-c-w pub-c-w1">
              <div class="pub-w pub-padding">
                <span class="pub-title pub-w1">最新采集房源</span>
                <div class="fastseek-list float">查看更多</div>
              </div>
              <ul class="ranking-left-list">
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
                <li>
                  <p class="p-left">王先生</p>
                  <p class="p-middle">两房</p>
                  <p class="p-right">100万</p>
                </li>
              </ul>
            </div>
            <!-- 最新采集房源 end-->

            <!-- 最新房源 -->
            <div class="pub-c-w_box" >
              <div class="pub-w pub-padding pub-w2">
                <span class="pub-title">通知公告</span>
                <div class="fastseek-list float" @click="notice">查看更多</div>
              </div>
              <div class="box">
                 <ul class="ranking-left-list_Up ranking-left-list1 ranking-left-list2 " ref="con1":class="{anim:animate==true}">
                   <li v-for='item in noticeitems' >
                     {{item.content}}
                   </li>
                 </ul>
                </div>
            </div>
            <!-- 最新房源 end-->
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 end-->
    <!--底部  -->
    <div class="footer-list warp">
      <!-- 商务合作 -->
      <div class="footer-li">
        <div class="footer-title">商务合作</div>
        <ul class="footer-ul">
          <li>视频拍摄及制作</li>
          <li>搜索竞价托管</li>
          <li>微信公众号运营托管</li>
          <li>微商城开发及运营</li>
        </ul>
      </div>
      <!-- 商务合作 end -->
      <!-- 技术服务 -->
      <div class="footer-li">
        <div class="footer-title">技术服务</div>
        <ul class="footer-ul">
          <li>小程序开发及运营</li>
          <li>软件开发及运营</li>
          <li>APP开发及运营</li>
          <li>网站开发及运营</li>
        </ul>
      </div>
      <!-- 技术服务 end -->
      <!-- 增值服务 -->
      <div class="footer-li">
        <div class="footer-title">增值服务</div>
        <ul class="footer-ul">
          <li>开通房源采集服务</li>
          <li>开通客源采集服务</li>
          <li>开通房源导入服务</li>
          <li>开通短信发送服务</li>
        </ul>
      </div>
      <!-- 增值服务 -->
      <!-- 联系方式 -->
      <div class="footer-li">
        <div class="footer-title">联系方式</div>
        <ul class="footer-ul">
          <li>
            官方网址：www.wuyoufang.com
          </li>
          <li>
            服务热线：0898-88255555
          </li>
        </ul>
      </div>
      <!-- 联系方式 end -->
      <!-- 官方微信 -->
      <div class="footer-li">
        <div class="footer-title">官方微信</div>
        <ul class="footer-ul">
          <li>
            <img src="../assets/img/cose.jpg">
            <p>官方微信公众号</p>
          </li>
        </ul>
      </div>
      <!-- 官方微信 end -->
    </div>
    <!-- 底部 end -->
    <!-- footer -->
    <footers></footers>
    <!-- footer end-->
    <!-- 发布公告 弹窗-->
    <div v-show="Releshow">
      <Relemodal :getNotice="getNotice" :LDmodal="opensunmit" :ReleClose="rele"></Relemodal>
    </div>
    <!-- 发布公告 弹窗  end-->
    <!-- 客源录入 弹窗-->
    <div v-show="Tourshow">
      <Tourmodal :LDmodal="opensunmit" :TourClose="tour"></Tourmodal>
    </div>
    <!-- 客源录入 弹窗  end-->
    <!-- 公告更多 -->
    <div v-show="Noticeshow">
      <Noticemodal :NoticeClose="notice"></Noticemodal>
    </div>
    <!-- 公告更多 end -->
    <!-- 房源录入 -->
    <div v-show="Housshow">
      <Housmodal :LDmodal="opensunmit" :HousClose="Hous"></Housmodal>
    </div>
    <!-- 房源录入 end -->
    <!-- 楼盘录入 -->
    <div v-show="Saleshow">
      <Salemodal ref="sale" :LDmodal="opensunmit" :SaleClosetwo="SaleClosetwo" :SaleClose="Sale"></Salemodal>
    </div>
    <!-- 楼盘录入 end -->
    <!--提示弹框-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
    </div>
  </div>
</template>
<script type="text/babel">
  import {setBodyScroll,recoverBodyScroll} from '@/comm/js/dom.js'
  import heads from './head';
  import footers from './footer';
  import Relemodal from './rele-modal';
  import Tourmodal from './tour-modal';
  import Noticemodal from './notice-modal';
  import Housmodal from './hous-modal';
  import Salemodal from './sale-modal';
  import Modal from './modal.vue';
  export default {
    components: {
      heads,
      footers,
      Relemodal,
      Tourmodal,
      Noticemodal,
      Housmodal,
      Salemodal,
      Modal
    },
    data() {
      return {
        topmsg: '',
        submitShow: false,
        message: '',
        pushTo: '',
        Noticeshow: false,
        Tourshow: false,
        Releshow: false,
        animate: false,
        isrele: true,
        isnotice: false,
        Saleshow: false,
        Housshow: false,
        noticeitems: [],
        indexData:{},
      }
    },
    created() {
      this.getIndexData();
      // setInterval(this.scroll,3000) ;// 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
      // 对接
      let that = this;
      that.getNotice();
      // 获取所有楼盘
      that.$http.get('/index/premises/all').then(res => {
      }).catch(err => {
      })
    },
    methods: {
    //首页数据  本周推荐房源  最新房源
          getIndexData(){
            let that = this;
           that.$http.post('/index')
             .then(res=>{
                 console.log(res);
                that.indexData = res.data;
              }).catch(err=>{
                console.log(err);
             })
         },
      // 通知公告
      getNotice(){
        let that =this;
        // 通知公告
        that.$http.get('/index/notice')
          .then(function (res) {
            that.noticeitems = res.data.data;
            that.topmsg = that.noticeitems[0].content;
          })
          .catch(function (err) {
            console.log(err);
          });
      },

      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true
      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      SaleClosetwo() {
        this.Saleshow = !this.Saleshow
      },
      // 新闻滚动
      // scroll(){
      //   let con1 = this.$refs.con1;
      //   con1.style.marginTop='-30px';
      //   this.animate=!this.animate;
      //   let that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      //   setTimeout(function(){
      //     that.items.push(that.noticeitems[0]);
      //     that.items.shift();
      //     // con1.style.marginTop='0px';
      //     that.animate=!that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      //   },500)
      // },
      // 发布公告
      rele: function () {
        // 滚动条
        setBodyScroll();
        this.Releshow = !this.Releshow
        if(!this.Releshow){
          // 恢复滚动条
          recoverBodyScroll();
        }
      },
      // 录入客源
      tour: function () {
        // 滚动条
        setBodyScroll();
        this.Tourshow = !this.Tourshow
        if(!this.Tourshow){
          // 恢复滚动条
          recoverBodyScroll();
        }
      },
      // 发布公告
      notice: function () {
        // 滚动条
        setBodyScroll();
        this.Noticeshow = !this.Noticeshow
        if(!this.Noticeshow){
          // 恢复滚动条
          recoverBodyScroll();
        }
      },
      // 我要录房源
      Hous: function () {
        // 滚动条
        setBodyScroll();

        this.Housshow = !this.Housshow
        if(!this.Housshow){
          // 恢复滚动条
          recoverBodyScroll();
        }
      },
      // 我要录楼盘
      Sale: function () {

         //根据ref获取子组件函数
        this.$refs.sale.getHttp();

        // 滚动条
        setBodyScroll();
        this.Saleshow = !this.Saleshow
        if(!this.Saleshow){
          // 恢复滚动条
          recoverBodyScroll();
        }
      },
    }
  }
</script>
<style scoped>

  .footer-ul {
    width: 100%;
    float: left;
  }

  .footer-ul li div {
    width: 50%;
    float: left;
  }
  .footer-ul li {
    margin-top: 10px;
    width: 100%;
    float: left;
  }
  .footer-list {
    margin-top: 50px;
    float: left;
    text-align: center;
    margin-bottom: 50px;
  }
  .footer-li {
    width: 20%;
    float: left;
  }
  .footer-title {
    width: 100%;
    float: left;
    font-weight: bold;
  }
  .con-pub {
    width: 100%;
    float: left;
  }
  .footer-ul img {
    width: 75px;
  }
  .p-left {
    width: 30%;
  }
  .pub-w2 {
    position: absolute;
    top: 0;
    left: 0;
  }
  .from li input {
    width: 60%;
  }
  .ranking-left-list2 {
    padding-top: 30.6px;
    padding-left: 10px;
  }
  #con1 li {
    list-style: none;
    line-height: 30px;
    height: 30px;
  }
  .p-right {
    width: 20%;
  }
  .ranking-left-list1 li {
    line-height: 30px;
    margin-top: 20px;
    border-bottom: 1px solid #e1e1e2;

  }
  .p-middle {
    width: 50%;
  }
  .con-right {
    margin-left: 1%;
    float: left;
    width: 61%;
  }
  .color {
    color: #1590ed;
    margin: 0 5px;
  }
  .con-pub1 {
    margin-top: 11px;
  }
  .float {
    float: right;
  }
  .pub-c-w {
    width: 32.2%;
    float: left;
    position: relative;
  }
  /*通知公告*/
  .pub-c-w_box{
    width: 32.2%;
    float: left;
    position: relative;
  }
  .pub-c-w_box{
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    height: 288.6px;
    overflow: hidden;
    box-shadow: #e8e7e7 2px 2px 2px;
    position: relative;

  }
  .ranking-left-list {
    width: 100%;
    float: left;
  }
  .ranking-left-list_Up{
    width: 90%;

  }
  .font-w {
    font-weight: bold;
  }
  .pub-c-w1 {
    margin: 0 1.7%;
  }
  .ranking-left-list li {
    width: 94%;
    padding-left: 3%;
    float: left;
  }
  .ranking-left-list p {
    text-align: center;
    float: left;
    margin-top: 10px;
  }
  .pub-w1 {
    width: 100px !important;
    float: left
  }
  .ranking {
    width: 100%;
    float: left;
    margin-top: 10px;
  }
  .ranking-left {
    width: 49%;
    float: left;
    margin-right: 2%;
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    height: 288.6px;
    overflow: hidden;
    box-shadow: #e8e7e7 2px 2px 2px;

  }
  .pub-c-w {
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    height: 288.6px;
    overflow: hidden;
    box-shadow: #e8e7e7 2px 2px 2px;
    position: revert;
  }
  .ranking-right {
    margin-right: 0 !important;
  }
  .fastseek-list span {
    margin-left: 30px;
  }
  .fastseek-list{
    cursor:pointer;
  }
  .from {
    width: 100%;
    float: left;
    text-align: center;
  }
  .from li {
    margin-top: 15px;
    height: 30px;
    position: relative;
    width: 47%;
    margin-left: 100px;
    border: 1px solid #d3d3d3;
  }

  .from li button {
    height: 30px;
    padding: 0 15px;
    float: right;
    border: none;
    background: #eee
  }

  .from li input {
    height: 30px;
    border: none;
  }

  .from li span {
    border-right: 1px solid #d3d3d3;
    padding-right: 10px;
  }

  .pub-w {
    width: 100%;
    float: left;
    line-height: 30px;
    background: #f9f9f9;
    border-bottom: 1px solid #d3d3d3;
  }

  .pub-title {
    font-weight: bold;
    float: left;
    width: 50px;
  }

  .pub-padding {
    width: 94%;
    height: 50px;
    padding: 0 3%;
  }

  .Input-list li {
    float: left;
    padding-left: 5%;
    margin-left: 10px;
    cursor:pointer;
  }
  .pub-list{
   display: flex;

  }
  .fastseek {
    border: 1px solid #d3d3d3;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 231px;
    position: revert;
    box-shadow: #e8e7e7 2px 2px 2px;
  }

  .Input {
    border: 1px solid #d3d3d3;
    line-height: 44px;
    background: #f9f9f9;
    float: left;
    box-shadow: #e8e7e7 2px 2px 2px;
    margin-bottom: 10px;
  }

  .content {
    margin-top: 116.4px;
    width: 100%;
    float: left;
  }
  .con-left {
    width: 38%;
    float: left;
  }

  .notice {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 27px;
    z-index: 998;
    line-height: 27px;
    background: #f9f9f9;
    border-bottom: 1px solid #d0d1d2;
  }

  .notice span {
    width: 60px;
    background: #f9f9f9;
    position: absolute;
    left: 0;
    height: 27px;
    display: inline-block;
    z-index: 1;
  }
  .con-pub con-pub1{
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    height: 288.6px;
    overflow: hidden;
    box-shadow: #e8e7e7 2px 2px 2px;
    position: absolute;
  }
  /*轮播图*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;

  }
  /*轮播图*/
  .el-carousel__item:nth-child(2n) {
    background-image: url("../assets/img/tup_a.jpg");
  }

  .el-carousel__item:nth-child(2n+1) {
    background-image: url("../assets/img/tup.b.jpg");
  }
  .el-carousel__item:nth-child(2n+2) {
    background-image: url("../assets/img/tup.c.jpg");
  }
  .el-carousel__item:nth-child(2n+3) {
    background-image: url("../assets/img/tup.d.jpg");
  }
  .box{
    height: 350px;
    overflow: hidden;
    overflow-y: scroll;
    cursor:pointer;
  }
.index_box{
  width:100%;
  height:100%;
  overflow: hidden;
  /*overflow-y: scroll;*/
}

</style>
